<template>
  <el-main>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchForm.name" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
        <el-button icon="el-icon-refresh-right" @click="onRefresh">重置</el-button>
        <el-button type="success" icon="el-icon-plus" @click="openEditWindow">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        prop="name"
        label="部门名称"
        sortable
        width="350  "
      />
      <el-table-column
        prop="parentName"
        label="所属部门"
        sortable
        width="180"
      />
      <el-table-column
        prop="phone"
        label="部门电话"
        sortable
        width="180"
      />
      <el-table-column
        prop="address"
        label="地址"
      />
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit-outline" size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-close" size="small" @click="remove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <SystemDialog
      :title="departmentDialog.title"
      :visible="departmentDialog.visible"
      :width="departmentDialog.width"
      :height="departmentDialog.height"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form ref="editDepartmentForm" :model="editDepartmentForm" :rules="editDepartmentRules" label-width="80px" :inline="true" size="small">
          <el-form-item label="所属部门" prop="pid">
            <el-select v-model="editDepartmentForm.parentName" class="edit-department-input" filterable placeholder="请选择" @change="parentDepartmentChange">
              <el-option
                v-for="item in departmentOptions"
                :key="item.id"
                :label="item.name"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="editDepartmentForm.name" class="edit-department-input" autocomplete="off" />
          </el-form-item>
          <el-form-item label="部门电话" prop="phone">
            <el-input v-model="editDepartmentForm.phone" class="edit-department-input" autocomplete="off" />
          </el-form-item>
          <el-form-item label="部门地址" prop="address">
            <el-input v-model="editDepartmentForm.address" class="edit-department-input" autocomplete="off" />
          </el-form-item>
          <el-form-item label="序号" prop="order">
            <el-input v-model="editDepartmentForm.order" class="edit-department-input" autocomplete="off" />
          </el-form-item>
        </el-form>
      </div>
    </SystemDialog>
  </el-main>
</template>

<script>
import { getDepartmentList, getParentDepartment, addDepartment, deleteDepartment, checkDepartment } from '@/api/department'
import SystemDialog from '@/components/system/SystemDialog'
import myconfirm from '@/utils/myconfirm'
export default {
  components: {
    SystemDialog
  },
  data() {
    return {
      searchForm: {
        name: ''
      },
      departmentOptions: [],
      editDepartmentRules: {
        parentId: [{ required: true, trigger: 'change', message: '请选择所属部门' }],
        name: [{ required: true, trigger: 'blur', message: '请输入部门名称' }]
      },
      tableData: [],
      formLabelWidth: '120px',
      editDepartmentForm: {
        sort: 0
      },
      departmentDialog: {
        title: '',
        visible: false,
        width: 560, // 窗口宽度
        height: 170 // 窗口高度
      }
    }
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    parentDepartmentChange(val) {
      console.log(val)
      this.editDepartmentForm.parentId = val.id
      this.editDepartmentForm.parentName = val.name
    },
    openEditWindow() {
      this.departmentDialog.title = '编辑'
      this.departmentDialog.visible = true
      this.getParentDepartment()
    },
    clearEditWindow() {
      this.departmentDialog.visible = false
      this.editDepartmentForm = {}
      this.$refs['editDepartmentForm'].resetFields()
    },
    getParentDepartment() {
      getParentDepartment().then(res => {
        this.departmentOptions = res.data
      })
    },
    getDepartmentList() {
      getDepartmentList(this.searchForm).then(res => {
        this.tableData = res.data
        this.departmentOptions = res.data
      })
    },
    onSearch() {
      this.getDepartmentList()
    },
    onRefresh() {
      this.searchForm.name = ''
    },
    edit(department) {
      this.editDepartmentForm = department
      this.editDepartmentForm.order = department.sort
      this.openEditWindow()
    },
    async remove(id) {
      const result = await myconfirm('确定删除吗')
      if (result) {
        checkDepartment(id).then(res => {
          if (res.code === 200) {
            this.deleteDepartment(id)
          }
        })
      }
    },
    deleteDepartment(id) {
      deleteDepartment(id).then(res => {
        if (res.code === 200) {
          this.$message({
            message: res.data,
            type: 'success'
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
        this.clearEditWindow()
        this.getDepartmentList()
      })
    },
    onClose() {
      console.log('关闭')
      this.clearEditWindow()
    },
    onConfirm() {
      this.$refs.editDepartmentForm.validate(valid => {
        if (valid) {
          this.editDepartmentForm.sort = this.editDepartmentForm.order
          addDepartment(this.editDepartmentForm).then(res => {
            if (res.code === 200) {
              this.$message({
                message: res.data,
                type: 'success'
              })
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
            this.getDepartmentList()
            this.clearEditWindow()
          })
        } else {
          console.log('错误提交')
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.edit-department-input{
  width: 180px;
}
</style>
